<!--
  子组件 向 父组件 传值
-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    label {
      background-color:cornsilk
    }
  </style>
</head>
<body>

  <!-- 父组件模版 -->
  <div id="app">
    <!-- 第1种 因：如果内部有多个事件 -->
    <!-- <cpn
      :ccallback='callback'
      :ccategories='categories'
    ></cpn> -->

    <!-- 第二种 常用：组件全部区域为一个的点击-->
    <cpn
      @item_click='cpnClick'
      :ccategories='categories'
    ></cpn>
  </div>

  <!-- 子组件模版 -->
  <template id='aaa'>
    <div v-if='ccategories'>
      ccategories true
      <br>
      <div v-for='(c, index) in ccategories' id='sssss'>
        <label @click='btnClick(c)' >{{c.name}}</label>
      </div>

      <hr>
      <div v-for='(c, index) in ccategories' id='sssss' @click='btnClick(c)'>
        <label >{{c.name}}</label>
      </div>
    </div>
    <div v-else>false</div>

  </template>

  <script src="../../js/vue.js"></script>
  <script>

    // 子传父
    const cpn = {
      template: '#aaa',
      props: {
        ccategories: {
          type: Array,
          require: true,
          defalut() { return []}
        },
        ccallback: {
          type: Function,
          require: true,
          defalut() {
            return (e)=>{ console.log('default = null') }
          }
          // defalut: (e)=>{ console.log('default = null') }
       }
      },
      methods: {
        btnClick(item) {
          console.log('btnClick')
          let callback = this.ccallback;
          //第一种 传事件
          // c && callback && callback(c);

          //第二种 广告
          this.$emit('item_click', item)
        },
      }
    }

    // root 组件
    const app = new Vue({
      el: '#app',
      data: {
        categories: [ //接口返回数据
          {id: 'aaa', name: '热门推荐'},
          {id: 'bbb', name: '手机数码'},
          {id: 'ccc', name: '家用家电'},
          {id: 'ddd', name: '电脑办公'},
        ]
      },
      methods: {
        callback(item) {
          console.log('item=',item,' id=',item.id)
        },
        cpnClick(item) {
          console.log('2 item=',item,' id=',item.id)
        }
      },
      components: {
        cpn
      }
    })
  </script>
</body>
</html>